<template>
	<view class="uni-collapse-list">
		<navigator url="collectionAdd" hover-class='none'>
			<view class="Add-collection">
				<uni-icons type="plusempty" size="20"></uni-icons>
				添加新的收藏夹
			</view>
		</navigator>
		<uni-collapse accordion :v-model="accordionVal" @change="change">
			<uni-collapse-item v-for="(item,index) in collapses" :key="index" :title-border="false" :border="false"
				titleBorder="none" :show-arrow='false'>
				<template v-slot:title>
					<view class="uni-collapse-title">
						<view class="uni-collapse-title-left">
							<view
								:class="[accordionVal===index?'uni-collapse-info-active uni-collapse-inco':'uni-collapse-inco',accordionVal==='' && OldsaccordionVal===index?'uni-collapse-info-noactive uni-collapse-inco':'uni-collapse-inco']">
								<uni-icons type="bottom" size="20"></uni-icons>
							</view>
							<view class="uni-collapse-title-right"><text
									style="margin-right: 10px;margin-left: 5px;">{{item.collapseName}}</text>
								{{item.num}}
							</view>
						</view>
						<view @click.stop="onBatch">
							<uni-icons type="list" size="20"></uni-icons>
						</view>
					</view>
				</template>
				<view v-for="(items,index) in item.children" :key="index" class="content">
					<view class="text">
						<view class="collection-item-list">
							<view class="collection-item-items">
								<view class="collection-item">
									<view class="collection-item-image">
										<image
											src="https://c-ssl.duitang.com/uploads/blog/202206/08/20220608130125_62433.jpg"
											mode="">
										</image>
									</view>
									<view class="collection-item-info">
										<view class="collection-item-title">
											盆栽转让，30大洋买的带不走ss
										</view>
										<view class="collection-item-Information">
											<view class="collection-item-Information-price">
												￥15.0
											</view>
											<view class="collection-item-Information-Browse">
												<image src="../../../static/concern_static/眼睛.png" mode=""></image>
												<text style="margin-left: 5px;">130</text>
											</view>
											<view class="collection-item-Information-message">
												<image src="../../../static/concern_static/消息.png" mode=""></image>
												<text style="margin-left: 5px;">130</text>
											</view>
											<view class="collection-item-Information-Day">
												2天前
											</view>
										</view>
									</view>
								</view>
								<view @click="collectionItem" class="chat-custom-right">
									<image @click="shareToggle" src="../../../static/concern_static/icon_more.png"
										mode="" style="padding:13rpx 0rpx; width: 30px;height: 30px;"></image>
								</view>
							</view>
							<view class="collection-item-bottom"></view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class="del">
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<view @click="OnUnfollow" class="delUnfollow">
					<view class="Unfollow-text">
						<image style="height: 30px; width: 30px; margin-right: 10px;"
							src="../../../static/concern_static/删除.png" mode=""></image>
						<view class="size">
							从收藏夹删除
						</view>
					</view>
				</view>
				<view class="Cancel">
					<button style="background-color: #fff;" type="default" @click="onCancel">取消</button>
				</view>
			</uni-popup>

		</view>
		<view class="">
			<uni-popup ref="BatchShare" type="share" safeArea backgroundColor="#fff">
				<view class="Unfollow">
					<view class="Unfollow-text">

						<view @click="OnUnfollow" class="Modefy">
							<image style="height: 30px; width: 30px; margin-right: 10px;"
								src="../../../static/concern_static/232编辑、输入-线性 (1).png" mode=""></image>
							<view class="Modefy-text">编辑信息</view>
						</view>
						<view class="batch">
							<image style="height: 30px; width: 30px; margin-right: 10px;"
								src="../../../static/concern_static/系统管理-菜单管理.png" mode=""></image>
							<view class="batch-text">批量管理</view>
						</view>
					</view>


				</view>
				<view class="Cancels">
					<button style="background-color: #fff;" type="default" @click="onCancel">取消</button>
				</view>
			</uni-popup>

		</view>
		<view v-if="succeed" class="caoz" :class="succeed?'caoz caozout':'caoz'">
			<view class="">
				操作成功
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	let accordionVal = ref(null)
	let share = ref(null)
	let BatchShare = ref(null)
	let succeed = ref(false)
	let coaz = ref(null)
	let collapses = reactive([{
		collapseName: '默认收藏夹',
		num: 6,
		children: [{
				name: '张三'
			},
			{
				name: '李四'
			}
		]
	}, {
		collapseName: '我的候选',
		num: 8,
		children: [{
				name: '王五'
			},
			{
				name: '赵六'
			}
		]
	}, {
		collapseName: '特别喜欢',
		num: 16
	}, {
		collapseName: '已作废',
		num: 5
	}, ])
	const shareToggle = () => {

		share.value.open()
	}
	const onCancel = () => {
		share.value.close()
		BatchShare.value.close()
	}

	function OnUnfollow() {
		succeed.value = true
		share.value.close()
		console.log(coaz.value);
		let time = setTimeout(() => {
			succeed.value = false
			clearInterval(time)
		}, 1000)
	}

	function change(e) {
		if (e) {
			accordionVal.value = e * 1
			return
		}
		accordionVal.value = ''
	}

	function collectionItem() {
		console.log(1111);
	}

	function onBatch() {
		BatchShare.value.open()
	}
</script>

<style lang="less">
	.Add-collection {
		margin-bottom: 5px;
		display: flex;
		align-items: center;

		uni-icons {
			margin-right: 10px;
		}
	}

	.uni-collapse-list {
		padding: 15px;
	}

	.uni-collapse-inco {
		height: 20px;
		width: 20px;
	}

	.uni-collapse-info-active {
		transform: rotate(180deg) !important;
		transition-property: transform !important;
		transition-duration: 0.3s !important;
		transition-timing-function: ease !important;
	}

	.uni-collapse-info-noactive {
		transform: rotate(360deg) !important;
		transition-property: transform !important;
		transition-duration: 0.3s !important;
		transition-timing-function: ease !important;
	}

	.uni-collapse-title {
		display: flex;
		padding: 10px 0px;
		justify-content: space-between;
		align-items: center;

		.uni-collapse-title-left {
			display: flex;
			align-items: center;
		}
	}

	.collection-item-list {
		.collection-item-bottom {
			height: 1px;
			background: linear-gradient(to right, #f6f6f6 0%, #e4e4e4 50%, #f6f6f6 100%);
			width: 80%;
			margin: auto;

		}

		.collection-item-items {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.collection-item {
				padding: 10px 15px;
				display: flex;
				flex: 1;

				.collection-item-image {
					height: 40px;
					width: 40px;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.collection-item-info {
					margin-left: 10px;
					flex: 1;

					.collection-item-title {
						font-weight: 700;
						width: 184px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.collection-item-Information {
						margin-top: 10px;

						display: flex;
						align-items: center;

						.collection-item-Information-price {
							color: red;
							font-weight: 600;
							width: 25%;
						}

						.collection-item-Information-Browse {
							display: flex;
							align-items: center;
							width: 25%;

							image {
								height: 20px;
								width: 20px;
							}
						}

						.collection-item-Information-message {
							display: flex;
							align-items: center;
							width: 25%;

							image {
								height: 15px;
								width: 15px;
							}
						}
					}
				}
			}
		}
	}

	.delUnfollow {
		position: relative;
		background-color: #ffffff;
		// top: -70px;
		z-index: 1;
		margin-bottom: 10px;

		.Unfollow-text {
			display: flex;
			align-items: center;
			padding: 15px;

			.size {
				font-size: 18px;
			}
		}
	}

	.Cancel {
		// margin-top: -70px;

		button::after {
			border: none;
		}
	}

	.caoz {
		position: absolute;
		background-color: #fff;
		padding: 5px;
		bottom: 150px;
		text-align: center;
		width: 100%;

		// display: none;
		view {
			background-color: #dedede;
			padding: 5px;
			width: 20%;
			margin: auto;
			// border-radius: 10px;
		}


	}

	@keyframes sss {
		from {}

		50% {
			opacity: 0.1;
		}

		90% {
			opacity: 0.1;
		}

		to {
			opacity: 0;
		}
	}

	.caozout {

		animation: sss 2s 1 linear;
	}

	.Cancels {

		// position: relative;
		// bottom: -1000px;
		button::after {
			border: none;
		}
	}

	.Unfollow {
		position: relative;
		background-color: #ffffff;
		top: -110px;
		z-index: 1;
		margin-bottom: 10px;

		.Unfollow-text {
			.Modefy {
				display: flex;
				padding: 10px 0px;
				border-bottom: 2px #e5e5e5 solid;
				align-items: center;
			}

			.batch {
				display: flex;
				padding: 10px 0px;
				align-items: center;
			}

			align-items: center;
			padding:0px 10px;

			.size {
				font-size: 18px;
			}
		}
	}

	.Cancels {
		margin-top: -100px;

		button::after {
			border: none;
		}
	}
</style>